<template>
  <device_manage
    ref="device"
    :list-search="listSearch"
  >
    <template #list-search>
      <el-col :span="4.8">
        <el-button type="info" size="small" @click="stateView()"><i class="el-icon-view"/>批量状态查看</el-button>
      </el-col>
      <el-col :span="4.8">
        <span>运行状态</span>
        <el-select v-model="listSearch.runningStatus" size="small" placeholder="全部" clearable>
          <el-option v-for="item in runningStatusArr" :key="item.value" :value="item.value" :label="item.label"/>
        </el-select>
      </el-col>
      <el-col :span="4.8">
        <span>报警状态</span>
        <el-select v-model="listSearch.alarmStatus" size="small" placeholder="全部" clearable>
          <el-option v-for="item in alarmStatusArr" :key="item.value" :value="item.value" :label="item.label"/>
        </el-select>
      </el-col>
      <el-col :span="4.8">
        <el-input placeholder="请输入设备名称/编号搜索" v-model="listSearch.text" size="small" class="search" clearable>
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-col>
    </template>
    <template #table-column>
      <el-table-column type="selection" width="50"/>
      <el-table-column prop="deviceName" label="设备名称" min-width="120px"/>
      <el-table-column prop="deviceNo" label="设备编号" min-width="120px"/>
      <el-table-column prop="devicePlace" label="设备位置" show-overflow-tooltip min-width="120px"/>
      <el-table-column label="运行状态" width="80px">
        <template v-slot="{row}">
          <span>{{ runningStatusArr[row.runningStatus].label }}</span>
        </template>
      </el-table-column>
      <el-table-column label="报警状态" width="80px">
        <template v-slot="{row}">
          <span>{{ alarmStatusArr[row.alarmStatus].label }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="fanStatus" label="风机状态" width="80px"/>
      <el-table-column fixed="right" label="操作" width="240px">
        <template v-slot="{row}">
          <el-button size="small" @click="stateView(row)">电梯状态</el-button>
          <el-button size="small" @click="monitoring(row)">监控</el-button>
          <el-button size="small" @click="handleInfo(row)">详情</el-button>
        </template>
      </el-table-column>
    </template>
  </device_manage>
</template>

<script>
import Device_condition from "./device_condition";
import Device_manage from "./device_manage";

export default {
  name: "elevator",
  components: {Device_condition, Device_manage},
  data() {
    return {
      listSearch: {
        text: '',
        runningStatus: null,
        alarmStatus: null,
      },
      runningStatusArr: [
        {value: 0, label: '在线'},
        {value: 1, label: '离线'},
      ],
      alarmStatusArr: [
        {value: 0, label: '正常'},
        {value: 1, label: '报警'},
      ],
    }
  },
  methods: {
    stateView(info) {
      let ids;
      if (info) {
        ids = [info.id];
      } else {
        let selected = this.$refs.device.getSelectedDevice();
        ids = selected.map(item => item.id);
        if (!ids.length) {
          return this.$message.warning("请选择需要查看的设备");
        }
      }
      this.$router.push({path: '/state', query: {ids}})
    },
    monitoring(info) {
      let ids;
      if (info) {
        ids = [info.id];
      } else {
        let selected = this.$refs.device.getSelectedDevice();
        ids = selected.map(item => item.id);
      }
      this.$router.push({path: '/video-monitoring-play', query: {ids}})
    },
    handleInfo(info) {

    },
  }
}
</script>

<style scoped>

</style>
